*{margin: 0;padding: 0;}
		html,body{height: 100%;}
		body{
			overflow: hidden;
			display: flex;
			background: #000;
			perspective: 1000px;
			transform-style: preserve-3d; 
		}
		#box{
			position: relative;
			display: flex;
			width: 130px;
			height: 200px;
			margin: auto;
			transform-style: preserve-3d; 
			transform: rotateX(-10deg);
		}
		#box > div{
			transform-style: preserve-3d; 
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			line-height: 200px;
			font-size: 50px;
			text-align: center;
			box-shadow:0 0 10px #fff;
			-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.8) 100%);
		}
		/*  #box > div:nth-child(1){
					background: skyblue;
					transform: translate3d(0,0,300px) rotateY(45deg);
				}
				#box > div:nth-child(2){
					background: pink;
					transform: rotateY(0deg);
				}
				#box > div:nth-child(3){
					background: purple;
					transform: translate3d(0,0,300px) rotateY(-45deg);
				} 
		*/
		#box p{
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 1200px;
			height: 1200px;
			background: -webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
			border-radius: 50%;
			transform: rotateX(90deg) translate3d(-600px,0,-105px);
		}